<template>
  <div class="box">
    <div class="top">
      <div class="top-item item1">
        <div class="top-item-li">
          <svg
            t="1679655235517"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4891"
            width="50"
            height="50"
          >
            <path
              d="M694.26516 286.98827 512 469.254453 329.732793 286.98827c-8.287757-8.287757-21.724791-8.286734-30.012547 0.001023-8.286734 8.286734-8.286734 21.723767 0 30.011524l161.04486 161.043836-108.634186 0c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l139.000797 0 0 89.12997L363.803773 609.617271c-11.720949 0-21.221324 9.502421-21.221324 21.221324s9.501398 21.221324 21.221324 21.221324l127.328967 0 0 131.572618c0 11.718903 9.502421 21.221324 21.221324 21.221324s21.221324-9.502421 21.221324-21.221324L533.575388 652.059919l127.327944 0c11.719926 0 21.221324-9.502421 21.221324-21.221324S672.623257 609.617271 660.903332 609.617271L533.575388 609.617271l0-89.12997 138.999774 0c11.719926 0 21.221324-9.502421 21.221324-21.221324s-9.502421-21.221324-21.221324-21.221324L563.233871 478.044654l161.043836-161.043836c8.287757-8.287757 8.287757-21.724791 0-30.012547C715.987904 278.700513 702.554964 278.700513 694.26516 286.98827z"
              fill="#0fb77f"
              p-id="4892"
            ></path>
            <path
              d="M512 65.290005c-246.316965 0-446.709995 200.39303-446.709995 446.708971 0 246.316965 200.39303 446.709995 446.709995 446.709995s446.709995-200.39303 446.709995-446.709995C958.709995 265.683035 758.316965 65.290005 512 65.290005zM512 916.266323c-222.913952 0-404.267347-181.353394-404.267347-404.267347S289.086048 107.733677 512 107.733677s404.267347 181.352371 404.267347 404.266323S734.912929 916.266323 512 916.266323z"
              fill="#0fb77f"
              p-id="4893"
            ></path>
          </svg>
          <div class="pri">
            <p class="price"><span>￥</span>120</p>
            <p class="text">今日已售(元)</p>
          </div>
        </div>
        <div class="top-item-ol">
          <p class="ol-text">日同比<span>增高30%</span></p>
        </div>
      </div>
      <div class="top-item item2">
        <div class="top-item-li">
          <svg
            t="1679656429324"
            class="icon"
            viewBox="0 0 1175 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6062"
            width="50"
            height="50"
          >
            <path
              d="M1118.814815 227.555556h-417.185185c-20.859259 0-37.925926-17.066667-37.925926-37.925926s17.066667-37.925926 37.925926-37.925926h398.222222c41.718519 0 75.851852-34.133333 75.851852-75.851852s-34.133333-75.851852-75.851852-75.851852h-441.837037l-146.014815 146.014815v81.540741h-81.540741l-202.903703 202.903703v100.503704h-87.22963c-13.274074-22.755556-37.925926-37.925926-64.474074-37.925926-41.718519 0-75.851852 34.133333-75.851852 75.851852v303.407407c0 41.718519 34.133333 75.851852 75.851852 75.851852 28.444444 0 53.096296-15.17037 64.474074-37.925926h87.22963v56.888889c0 32.237037 24.651852 56.888889 56.888888 56.888889h834.370371c32.237037 0 56.888889-24.651852 56.888889-56.888889v-682.666667c0-32.237037-24.651852-56.888889-56.888889-56.888888z m-530.962963 132.74074c41.718519 0 75.851852 34.133333 75.851852 75.851852s-34.133333 75.851852-75.851852 75.851852-75.851852-34.133333-75.851852-75.851852 34.133333-75.851852 75.851852-75.851852z m436.148148 512h-512v-227.555555h512v227.555555z"
              p-id="6063"
              fill="#1296db"
            ></path>
          </svg>
          <div class="pri">
            <p class="price">208</p>
            <p class="text">今日订票数</p>
          </div>
        </div>
        <div class="top-item-ol">
          <p class="ol-text">日同比<span>增高30%</span></p>
        </div>
      </div>
      <div class="top-item item3">
        <div class="top-item-li">
          <svg
            t="1679656640743"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7272"
            width="50"
            height="50"
          >
            <path
              d="M868.48 105.92h-251.2c3.52-5.44 5.44-11.52 5.44-17.92 0-31.04-45.12-56-100.48-56-55.68 0-100.48 24.96-100.48 56 0 6.4 1.92 12.48 5.44 17.92H175.36c-32.96 0-60.16 26.88-60.16 60.16v782.72c0 32.96 26.88 60.16 60.16 60.16h693.12c33.28 0 60.16-26.88 60.16-60.16V166.08c0-33.28-26.88-60.16-60.16-60.16z m-281.28 71.36c0 1.6 0 2.88-0.32 4.48a67.168 67.168 0 0 1-66.88 62.72c-35.52 0-64.64-27.84-66.88-62.72-0.32-1.28-0.32-2.88-0.32-4.48 0-3.84 0.32-7.68 0.96-11.2 1.92-11.52 6.72-22.4 14.08-31.36 12.48-15.04 31.36-24.64 52.16-24.64 21.44 0 40.64 9.92 52.8 25.6 6.72 8.64 11.52 18.88 13.12 30.08 0.96 3.84 1.28 7.68 1.28 11.52z m265.6 755.52H191.04V181.76h157.76v96.32h346.56V181.76h157.76v751.04z"
              fill="#f69608"
              p-id="7273"
            ></path>
          </svg>
          <div class="pri">
            <p class="price">328</p>
            <p class="text">今日支付订单数</p>
          </div>
        </div>
        <div class="top-item-ol">
          <p class="ol-text">日同比<span>增高30%</span></p>
        </div>
      </div>
      <div class="top-item item4">
        <div class="top-item-li">
          <svg
            t="1679657291767"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8548"
            width="50"
            height="50"
          >
            <path
              d="M512 288c-124.8 0-224 99.2-224 224s99.2 224 224 224 224-99.2 224-224-99.2-224-224-224z m0 400c-96 0-176-80-176-176s80-176 176-176 176 80 176 176-80 176-176 176zM768 371.2a1.6 1.6 0 1 0 102.4 0 1.6 1.6 0 1 0-102.4 0z"
              fill="#fa0781"
              p-id="8549"
            ></path>
            <path
              d="M864 224h-96l-22.4-67.2c-6.4-16-25.6-28.8-41.6-28.8H320c-19.2 0-35.2 12.8-41.6 28.8L256 224h-96c-54.4 0-96 41.6-96 96v448c0 54.4 44.8 96 96 96h704c54.4 0 96-41.6 96-96V320c0-54.4-41.6-96-96-96z m48 544c0 25.6-22.4 48-48 48H160c-25.6 0-48-22.4-48-48V320c0-25.6 22.4-48 48-48h131.2l9.6-32 22.4-64h377.6l22.4 64 9.6 32H864c25.6 0 48 22.4 48 48v448z"
              fill="#fa0781"
              p-id="8550"
            ></path>
          </svg>
          <div class="pri">
            <p class="price">328</p>
            <p class="text">今日支付订单数</p>
          </div>
        </div>
        <div class="top-item-ol">
          <p class="ol-text">日同比<span class="li">增高30%</span></p>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="left" ref="main"></div>
      <div class="aq">
        <h3 id="h3">
          热门出发/到达城市排名
          <el-select
            @change="changeSelect"
            v-model="value"
            class="m-2"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </h3>
        <div class="aq1">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="出发城市" name="first"> </el-tab-pane>
            <el-tab-pane label="到达城市" name="second"> </el-tab-pane>
          </el-tabs>
          <div class="right" ref="main1"></div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <h3>今日订单状态对比</h3>
        <div ref="circle1" id="circle1"></div>
      </div>
      <div class="centers">
        <h3>今日支付方式对比</h3>
        <div ref="circle2" id="circle2"></div>
      </div>
      <div class="right">
        <h3>今日热门出发到达城市</h3>
        <div ref="circle3" id="circle3"></div>
      </div>
    </div>
  </div>
</template>

<script >
import * as echarts from "echarts";
import { onMounted, onUnmounted, ref, } from "vue";
export default {
  setup() {
    const main = ref(null);
    const main1 = ref(null);
    const circle1 = ref(null);
    const circle2 = ref(null);
    const circle3 = ref(null);
    const activeName = ref("first");
    const color = ref("skyblue");
    const value = ref("今日");
    const options = [
      {
        value: "day",
        label: "今天",
      },
      {
        value: "week",
        label: "近七天",
      },
      {
        value: "month",
        label: "近一个月",
      },
    ];
    const toArr = ref([182, 234, 290, 330, 340, 370, 400, 420, 450, 560]);
    const fromArr = ref([185, 234, 290, 390, 340, 370, 410, 420, 450, 560]);
    const arr = ref([182, 234, 290, 330, 340, 370, 400, 420, 450, 560]);
    const handleClick = (tab, event) => {
      console.log(tab, event);
      switch (tab.index) {
        case "0":
          arr.value = toArr.value;
          break;
        case "1":
          arr.value = fromArr.value;
          break;
        default:
          break;
      }
      bar();
    };
    onMounted(() => {
      initChart();
      bar();
      circleOne();
      circleTwo();
      circleThree();
    });
    
    
    onUnmounted(() => {
      echarts.dispose;
    });

    // 基础配置一下Echarts
    // 折现
    function initChart() {
      var myChart = echarts.init(main.value);
      console.log(myChart);
      // 把配置和数据放这里
      myChart.setOption({
        title: {
          text: "近一周售票量",
          left: "left",
          textStyle: {
            color: "#1BA9BA",
          },
        },
        xAxis: {
          axisLabel: {
            interval: 0,
          },
          type: "category",
          data: [
            "2022-10-11",
            "2022-10-12",
            "2022-10-13",
            "2022-10-14",
            "2022-10-15",
            "2022-10-16",
            "2022-10-17",
          ],
        },
        yAxis: {
          type: "value",
        },
        legend: {
          data: ["售票量", "销售额"],
          left: "center",
        },
        series: [
          {
            name: "售票量",
            data: [22, 41, 38, 30, 41, 76, 83, 95],
            type: "line",
            smooth: true,
          },
          {
            name: "销售额",
            data: [19, 35, 30, 25, 38, 70, 75, 80],
            type: "bar",
            smooth: true,
            barWidth: "20%",
            itemStyle: {
              color: "#DE799B",
            },
          },
        ],
      });
       window.addEventListener("resize", () => {
        myChart.resize()
      })
    }
    // 柱状
    function bar(type) {
      var myChart = echarts.init(main1.value);
      // 初始化请求
      axios.get("/getCityCar", { params: { type: type } }).then((res) => {
        console.log(res.data);
        color.value = res.data
        myChart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          color: color.value,
          legend: {},
          grid: {
            top: "8%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            axisLabel: {
              show: false,
            },
            type: "value",
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: "category",
            data: [
              "哈尔滨",
              "桂林",
              "成都",
              "澳门",
              "香港",
              "武汉",
              "上海",
              "北京",
              "深圳",
              "三亚",
            ],
          },
          series: [
            {
              name: "2011",
              type: "bar",
              data: arr.value,
            },
          ],
        });
      });
      // 把配置和数据放这里

       window.addEventListener("resize", () => {
        myChart.resize()
      })
    }

    // 环形图1
    function circleOne() {
      var myChart = echarts.init(circle1.value);
      // 把配置和数据放这里
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "top",
          left: "center",
          itemGap: 1,
          itemHeight: 8,
          itemWidth: 8,
          icon: "circle",
        },
        series: [
          {
            name: "订单状态",
            type: "pie",
            radius: ["40%", "70%"],
            // avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },

            data: [
              { value: 500, name: "已付款" },
              { value: 200, name: "待付款" },
              { value: 20, name: "已取消" },
            ],
          },
        ],
      });
       window.addEventListener("resize", () => {
        myChart.resize()
      })
    }
    // 环形图2
    function circleTwo() {
      var myChart = echarts.init(circle2.value);
      // 把配置和数据放这里
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "top",
          left: "center",
          itemGap: 1,
          itemHeight: 8,
          itemWidth: 8,
          icon: "circle",
        },
        series: [
          {
            name: "订单状态",
            type: "pie",
            radius: ["40%", "70%"],
            // avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },

            data: [
              { value: 500, name: "支付宝" },
              { value: 200, name: "微信" },
              { value: 20, name: "其他" },
            ],
          },
        ],
      });
      window.addEventListener("resize", () => {
        myChart.resize()
      })
    }
    // 环形图3
    function circleThree() {
      var myChart = echarts.init(circle3.value);
      // 把配置和数据放这里
      myChart.setOption({
        tooltip: {
          trigger: "item",
        },
        // color:"orange",
        legend: {
          top: "top",
          left: "center",
          itemGap: 1,
          itemHeight: 8,
          itemWidth: 8,
          icon: "circle",
        },
        series: [
          {
            name: "订单状态",
            type: "pie",
            radius: ["40%", "70%"],
            // avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },

            data: [
              { value: 500, name: "三亚" },
              { value: 200, name: "深圳" },
              { value: 20, name: "北京" },
              { value: 500, name: "上海" },
              { value: 200, name: "武汉" },
              { value: 20, name: "香港" },
              { value: 500, name: "澳门" },
              { value: 200, name: "成都" },
              { value: 20, name: "桂林" },
              { value: 200, name: "哈尔滨" },
            ],
          },
        ],
      });
       window.addEventListener("resize", () => {
        myChart.resize()
      })
    }
    // 选择时间段
    const changeSelect = (type) => {
      console.log(type);
      bar(type)
    };
    return {
      main,
      main1,
      circle1,
      circle2,
      circle3,
      color,
      activeName,
      value,
      options,
      arr,
      toArr,
      fromArr,
      bar,
      initChart,
      circleOne,
      changeSelect,
      circleTwo,
      circleThree,
      handleClick,
    };
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  /* height: 100%; */
  height: 640px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
.top {
  width: 100%;
  height: 20%;
}

.top {
  display: flex;
  justify-content: space-between;
}
.top-item {
  width: 23%;
  height: 120px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 5px;
  border-radius: 10px;
}
.top-item-li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid gainsboro;
  height: 75px;
  align-items: center;
}
.price {
  font-size: 20px;
  color: #0fb77f;
}
.price span {
  font-size: 10px;
}
.text,
.ol-text {
  font-size: 13px;
}
.ol-text span {
  color: #1BA9BA;
}
.item2 .price {
  color: #1296db;
}
.item3 .price {
  color: #1BA9BA;
}
.item4 .price {
  color: #fa0781;
}
.item4 span {
  color: red;
}

.middle {
  width: 100%;
  height: 45%;
  display: flex;
  justify-content: space-between;
}
.middle .left {
  width: 50%;
  height: 100%;
  background: white;
  border-radius: 10px;
}
.middle .aq {
  width: 48%;
  height: 100%;
  background: white;
  border-radius: 10px;
}
.middle .aq h3 {
  width: 100%;
  height: 10%;
}
.middle .aq .aq1 .right {
  width: 100%;
  height: 85%;
  background: white;
  border-radius: 10px;
}
.middle .aq .aq1 {
  width: 100%;
  height: 90%;
}
.el-tabs--top {
  height: 15%;
}
.bottom {
  width: 100%;
  height: 31%;
  display: flex;
  justify-content: space-around;
}
.bottom .left,
.centers,
.right {
  width: 33%;
  height: 100%;
  background: white;
}
#circle1,
#circle2,
#circle3 {
  width: 100%;
  height: 170px;
  /* margin-top: 22px; */
}
.bottom .left,
.centers,
.right h3 {
  text-align: center;
  color: #0fb77f;
}
.el-select--large {
  line-height: 40px;
  width: 100px;
}
#h3{
  color: #1BA9BA;
}
</style>